<template>
    <van-index-bar v-if="friend_list.length">
        <div 
            v-for="(item, index) in friend_list" 
            :key="index">
            <van-index-anchor 
                v-if="item.length > 1"
                :index="item[0]" />
            <van-cell 
                v-for="(item, index2) in item.slice(1, item.length)" 
                :key="index2"
                :title="getDisplayName(item)"
                @click="$router.push({ path: '/home', query: { user_id: item._id } })" />
        </div>
    </van-index-bar>
</template>

<script>
    import { mapGetters, mapState } from "vuex";

    export default {
        name: "friends",
        computed: {
            ...mapGetters(['friend_list']),
            ...mapState(['friendList'])
        },
        methods: {
            // 获取显示名称，优先显示备注
            getDisplayName(item) {
                const friend = this.friendList.find(f => f.friendId && f.friendId._id === item._id);
                if (friend && friend.remark && friend.remark.trim() !== '') {
                    return friend.remark;
                }
                return item.nickname;
            }
        }
    }
</script>

<style lang="less" scoped>

</style>